from pyecharts import options as opts
from pyecharts.charts import Bar, Line, Grid

# 准备数据
x_data = ['小米', '三星', '华为', '苹果', '魅族', 'VIVO', 'OPPO']
y_a = [107, 36, 102, 91, 51, 113, 45]
y_b = [104, 60, 33, 138, 105, 111, 91]

bar = (
    Bar()  # 创建Bar类对象
    .add_xaxis(x_data)  # 横坐标上的数据
    .add_yaxis(
        "商家A",  # 图例
        y_a  # 系列数据
    )
    .add_yaxis(
        "商家B",  # 图例
        y_b  # 系列数据
    )
    .set_global_opts(  # 全局配置项
        title_opts=opts.TitleOpts(title="组合图表-柱形图")  # 标题，可\n换行
    )
)
line = (
    Line()  # 创建Line类对象
    .add_xaxis(x_data)  # # 横坐标上的数据
    .add_yaxis("商家A", y_a)
    .add_yaxis("商家B", y_b)
    .set_global_opts(
        title_opts=opts.TitleOpts(title="组合图表-折线图",
                                  pos_top="48%"
                                  # title 组件离容器上侧的距离。
                                  # top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，
                                  # 也可以是 'top', 'middle', 'bottom'。
                                  # 如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。
                                  ),
        legend_opts=opts.LegendOpts(pos_top="48%")
    )
)
grid = (
    Grid()  # 创建Grid类对象
    .add(
        bar,  # bar子类
        grid_opts=opts.GridOpts(pos_bottom="60%")
    )
    .add(
        line,  # line子类
        grid_opts=opts.GridOpts(pos_top="60%")
    )
)
grid.render("./并行多图示例.html")
# grid.render_notebook()